<!DOCTYPE html>
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('上报统计列表')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li id="unitLi3" style="display: none">
                            <label>三级单元：</label>
                            <select id="unitSelect3" name="unitId3" onchange="setNextUnitSelect(this.value,3)">
                            </select>
                        </li>
                        <li id="unitLi4" style="display: none">
                            <label>四级单元：</label>
                            <select id="unitSelect4" name="unitId4" onchange="setNextUnitSelect(this.value,4)">
                                <option value="">所有</option>
                            </select>
                        </li>
                        <li id="unitLi5" style="display: none">
                            <label>包区名称：</label>
                            <select id="unitSelect5" name="unitId5" onchange="setNextUnitSelect(this.value,5)">
                                <option value="">所有</option>
                            </select>
                        </li>
                        <li>
                            <label>网格名称：</label>
                            <select id="unitSelect6" name="unitId6">
                                <option value="">所有</option>
                            </select>
                        </li>
                        <li>
                            <label>时间选择：</label>
                            <select id="periodSelect" name="period" onchange="checkTimeLi(this.value)">
                                <option value="1">昨日新增</option>
                                <option value="0">今日新增</option>
                                <option value="6">本周新增</option>
                                <option value="29">本月新增</option>
                                <option value="89">季度新增</option>
                                <option value="-1">自定义</option>
                            </select>
                        </li>
                        <li id="startTimeLi" style="display: none">
                            <label for="startTimeInput">
                                开始时间：
                            </label>
                            <input class="form-control time-input" id="startTimeInput" name="startTime" placeholder="yyyy-MM-dd"
                                   type="text">
                        </li>
                        <li id="endTimeLi" style="display: none">
                            <label for="endTimeInput">
                                结束时间：
                            </label>
                            <input class="form-control time-input" id="endTimeInput" name="endTime" placeholder="yyyy-MM-dd"
                                   type="text">
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm"
                               onclick="$.table.search()">
                                <i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-warning" onclick="$.table.exportExcel()"
               shiro:hasPermission="workbench:visit_log_statistics:export">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    let editFlag = [[${@permission.hasPermi('workbench:visit_log_statistics:edit')}]];
    let removeFlag = [[${@permission.hasPermi('workbench:visit_log_statistics:remove')}]];
    let prefix = ctx + "workbench/visit_log_statistics";

    $(loadSelect)

    /**
     * 加载选择器
     */
    function loadSelect() {
        $.ajax({
            method: 'post',
            url: '/workbench/leaf_unit/selectHighestLevelDeptsByLoginName',
            success: function (dept) {
                let level = dept.level;
                if (level !== 2) {
                    setPreviousUnitSelect(dept.parentId, level);
                }
                setCurrentSelect(dept, level);
                setNextUnitSelect(dept.deptId, level);
                //延时加载表格
                setTimeout(loadTable, 200);
            }
        })
    }

    /**
     * 加载表格
     */
    function loadTable() {
        let options = {
            url: prefix + "/list",
            exportUrl: prefix + "/export",
            modalName: "上报统计",
            pagination: false,
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'unitName',
                    title: '单元名称'
                },
                {
                    field: 'increaseCount',
                    title: '昨日新增',
                    formatter: function (value, row, index) {
                        let period = row.period
                        let tableHeader
                        if (period === 0) {
                            tableHeader = '今日新增'
                        } else if (period === 1) {
                            tableHeader = '昨日新增'
                        } else if (period === 6) {
                            tableHeader = '本周新增'
                        } else if (period === 29) {
                            tableHeader = '本月新增'
                        } else if (period === 89) {
                            tableHeader = '季度新增'
                        } else {
                            tableHeader = '周期新增'
                        }
                        //通过类名找到标签
                        let tableHeaderClassArray = document.getElementsByClassName("th-inner");
                        tableHeaderClassArray[2].innerText = tableHeader
                        tableHeaderClassArray[2].innerHtml = tableHeader
                        tableHeaderClassArray[2].innerHTML = tableHeader

                        $(tableHeaderClassArray[2]).selectpicker('refresh');
                        return value
                    }
                },
                {
                    field: 'ownNetUserCount',
                    title: '本网用户数量'
                },
                {
                    field: 'otherNetUserCount',
                    title: '异网用户数量'
                },
                {
                    field: 'potentialUserCount',
                    title: '潜在用户数量'
                },
                {
                    field: 'transformedCount',
                    title: '转化数量'
                },
                {
                    field: 'transformedRate',
                    title: '转化率'
                },
                {
                    field: 'principal',
                    title: '负责人'
                }]
        };
        $.table.init(options);
    }

    /**
     * 设置上级单元选择器
     * @param parentId 当前选择的项
     * @param level 单元等级
     */
    function setPreviousUnitSelect(parentId, level) {
        $.ajax({
            method: 'post',
            url: '/system/dept/selectByDeptId',
            data: {
                deptId: parentId
            },
            success: function (previousUnit) {
                let selectId
                switch (level) {
                    case 6:
                        break
                    case 5:
                        selectId = "#unitSelect4"
                        setPreviousUnitSelect(previousUnit.parentId, 4)
                        break
                    case 4:
                        selectId = "#unitSelect3"
                        break
                    case 3:
                        break
                    default:
                        console.log("单元等级错误p:" + level)
                }
                let option = "<option value='" + previousUnit.deptId + "'>" + previousUnit.deptName + "</option>"
                $(selectId).html(option).selectpicker('refresh')
            }
        })
    }

    /**
     * 设置当前选择器的值
     */
    function setCurrentSelect(dept, level) {
        let selectId
        switch (level) {
            case 6:
                selectId = "#unitSelect6"
                break
            case 5:
                selectId = "#unitSelect5"
                break
            case 4:
                selectId = "#unitSelect4"
                break
            case 3:
                selectId = "#unitSelect3"
                break
            case 2:
                return;
            default:
                console.log("单元等级错误C:" + level)
        }
        let options = "<option value='" + dept.deptId + "'>" + dept.deptName + "</option>";
        $(selectId).html(options).selectpicker('refresh');
    }

    /**
     * 设置下级单元选择器
     * @param deptId 本单元id
     * @param level 本单元等级
     */
    function setNextUnitSelect(deptId, level) {
        resetNextSelectByLevel(level)
        if (deptId === "") {
            return;
        }
        $.ajax({
            method: 'post',
            url: '/system/dept/selectChildrenDeptById',
            data: {
                deptId: deptId,
                phone: 3
            },
            success: function (list) {
                let options = "<option value=\"\">所有</option>"
                for (let i = 0; i < list.length; i++) {
                    let option = list[i]
                    options += "<option value='" + option.deptId + "'>" + option.deptName + "</option>"
                }
                let selectId;
                let liId;
                switch (level) {
                    case 5:
                        selectId = "#unitSelect6";
                        liId = "#unitLi5";
                        break;
                    case 4:
                        selectId = "#unitSelect5";
                        liId = "#unitLi4";
                        setNextUnitSelect(list[0].deptId, 5);
                        break;
                    case 3:
                        selectId = "#unitSelect4";
                        liId = "#unitLi3";
                        setNextUnitSelect(list[0].deptId, 4);
                        break;
                    case 2:
                        setNextUnitSelect(list[0].deptId, level + 1);
                        selectId = "#unitSelect3";
                        break;
                    default:
                        console.log("单元等级错误n:" + level);
                }
                $(selectId).html(options).selectpicker('refresh');
                if (liId !== '') {
                    $(liId).show();
                }
            }
        })
    }

    /**
     * 设置选择器所有后，重置后续所有选择器未所有
     * @param level 单元等级
     */
    function resetNextSelectByLevel(level) {
        let options = "<option value=\"\">所有</option>"
        switch (level) {
            case 3:
                $("#unitSelect4").html(options).selectpicker('refresh')
                resetNextSelectByLevel(4)
                break
            case 4:
                $("#unitSelect5").html(options).selectpicker('refresh')
                resetNextSelectByLevel(5)
                break
            case 5:
                $("#unitSelect6").html(options).selectpicker('refresh')
                resetNextSelectByLevel(6)
                break
        }
    }

    /**
     * 如果选择自定义,显示日期选择框,否则隐藏
     * @param value value
     */
    function checkTimeLi(value) {
        if (value === '-1') {
            $("#startTimeLi").show()
            $("#endTimeLi").show()
        } else {
            $("#startTimeLi").hide()
            $("#endTimeLi").hide()
        }
    }
</script>
</body>
</html>
